<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>云服务器</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="css/global.css">
    <link rel="stylesheet" href="css/cloud.css">
</head>
<body>
    <!--顶部-->
    <div class="top_box">
        <div class="container">
               <div class="clearfix top_in">
                   <p class="left dec">网页游戏代理，页游平台研发</p>
                   <div class="right contact">
                        <div class="call contact_item">
                            <i class="iconfont icon-tubiao210"></i>
                            咨询热线：XXX
                        </div>
                       <div class="other_contact contact_item">
                           <a href="javascript:;">
                               <i class="iconfont icon-qq1"></i>
                           </a>
                           <a href="javascript:;">
                               <i class="iconfont icon-weibo"></i>
                           </a>
                           <a href="javascript:;">
                               <i class="iconfont icon-weixin"></i>
                           </a>
                       </div>
                       <div class="search contact_item">
                           <a href="javascript:;"><i class="iconfont icon-11"></i></a>
                       </div>
                   </div>
               </div>
        </div>
    </div>
    <!--导航-->
    <div class="top_nav_box clearfix">
        <div class="container">
                <div class="logo left">
                    <a href="javascript:;">
                        <img src="images/logo.png" alt="">
                    </a>
                </div>
                <ul class="nav_list left clearfix">
                    <li class="item">
                        <a href="javascript:;" class="nav_name">首页</a>
                    </li>
                    <li class="item ">
                        <a href="javascript:;" class="nav_name">企业介绍</a>
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name">产品介绍</a>
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name">风格演示</a>
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name">服务套餐</a>
                        <ul class="down_list">
                            <li class="down_list_item">
                                <a href="javascript:;">产品套餐</a>
                            </li>
                            <li class="down_list_item">
                                <a href="javascript:;">服务列表</a>
                            </li>
                        </ul>
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name">游戏列表</a>
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name">H5平台系统</a>
                    </li>
                    <li class="item active">
                        <a href="javascript:;" class="nav_name">云服务器</a>
                    </li>
                    <li class="item">
                        <a href="javascript:;" class="nav_name">联系我们</a>
                    </li>
                </ul>

        </div>
        <div class="screen_small">
            <a href="javascript:;" class="small_logo">
                <img src="images/logo.png" alt="">
            </a>
            <span class="screen_small_menu"><i class="iconfont icon-caidan"></i></span>
            <ul class="screen_small_list">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">企业介绍</a>
                </li>
                <li>
                    <a href="#">产品介绍</a>
                </li>
                <li>
                    <a href="#">风格演示</a>
                </li>
                <li class="">
                    <a href="javascript:;">产品套餐</a>
                </li>
                <li class="">
                    <a href="javascript:;">服务列表</a>
                </li>
                <li>
                    <a href="#">游戏列表</a>
                </li>
                <li>
                    <a href="#">H5平台系统</a>
                </li>
                <li>
                    <a href="#">云服务器</a>
                </li>
                <li>
                    <a href="#">联系我们</a>
                </li>

            </ul>
        </div>
    </div>
    <!--云服务器-->
    <div class="about_banner">
        <img src="images/yun/banner.png" alt="">
    </div>
    <!--云服务器-->
    <div class="container">
        <div class="about_title">
            <h2>云服务器</h2>
        </div>
        <div class="cloud_box clearfix">
            <div class="left cloud_l">
                <ul class="cloud_name">
                    <li></li>
                    <li>CPU</li>
                    <li>内存</li>
                    <li>储存</li>
                    <li>宽带</li>
                    <li>IP</li>
                    <li>操作系统</li>
                    <li>客户群</li>
                    <li>机房</li>
                    <li>价格</li>
                </ul>
            </div>
           <div class="left cloud_r">
               <div class="swiper-container" id="cloud_swiper">
                   <div class="swiper-wrapper">
                       <div class="swiper-slide">
                           <ul class="cloud_list">
                               <li class="font_bold">标准服务器</li>
                               <li>4核</li>
                               <li>4GB</li>
                               <li>250G</li>
                               <li>6M独享(电信)6M独享(BGP多线)</li>
                               <li>一个独立IP</li>
                               <li>Windows2003 centos redhat</li>
                               <li>电子商务类网站</li>
                               <li>成都电信机房 BGP多线机房</li>
                               <li><span class="color_r">539</span>元/月 <span class="color_r">1490</span>元/季 <span class="color_r">5390</span>元/年</li>
                           </ul>
                       </div>
                       <div class="swiper-slide">
                           <ul class="cloud_list">
                               <li class="font_bold">通用型云服务器</li>
                               <li>2核</li>
                               <li>2GB</li>
                               <li>150G</li>
                               <li>4M独享(电信)4M独享(BGP多线)</li>
                               <li>一个独立IP</li>
                               <li>Windows2003 centos redhat</li>
                               <li>企业官方网站、个人站长</li>
                               <li>成都电信机房 BGP多线机房</li>
                               <li><span class="color_r">338</span>元/月 <span class="color_r">920</span>元/季 <span class="color_r">3380</span>元/年</li>
                           </ul>
                       </div>
                       <div class="swiper-slide">
                           <ul class="cloud_list">
                               <li class="font_bold">普及型云服务器</li>
                               <li>2核</li>
                               <li>2GB</li>
                               <li>80G</li>
                               <li>3M独享(电信)3M独享(BGP多线)</li>
                               <li>一个独立IP</li>
                               <li>Windows2003 centos redhat</li>
                               <li>个人、中小企业展示型网站</li>
                               <li>成都电信机房 BGP多线机房</li>
                               <li><span class="color_r">268</span>元/月 <span class="color_r">760</span>元/季 <span class="color_r">2680</span>元/年</li>
                           </ul>
                       </div>
                       <div class="swiper-slide">
                           <ul class="cloud_list">
                               <li class="font_bold">增强型云服务器</li>
                               <li>4核</li>
                               <li>4GB</li>
                               <li>250G</li>
                               <li>6M独享(电信)6M独享(BGP多线)</li>
                               <li>一个独立IP</li>
                               <li>Windows2003 centos redhat</li>
                               <li>社区SNS、论坛、ERP、OA、CRM</li>
                               <li>成都电信机房 BGP多线机房</li>
                               <li><span class="color_r">768</span>元/月 <span class="color_r">2100</span>元/季 <span class="color_r">7680</span>元/年</li>
                           </ul>
                       </div>
                   </div>

               </div>

           </div>

        </div>
        <div class="swiper_handle">
            <div class="swiper-button-prev"><i class="iconfont icon-jiantou-left"></i></div>
            |
            <div class="swiper-button-next"><i class="iconfont icon-jiantou"></i></div>
        </div>
    </div>
    <!--产品优势-->
    <div class="pro_advantage">
       <div class="container">
           <div class="product_tit">
               产品优势
           </div>
           <ul class="advantage_list">
               <li class="advantage_item">
                   <div class="advantage_icon">
                       <i class="iconfont icon-performance"></i>
                   </div>
                   <h2 class="advantage_name">性能强劲稳定</h2>
                   <p class="advantage_en">PERFORMANCE</p>
                   <div class="advantage_dec">
                       全国直联点骨干机房 <br>
                       BGP多线认证星级机房
                   </div>
               </li>
               <li class="advantage_item">
                   <div class="advantage_icon">
                       <i class="iconfont icon-taocan"></i>
                   </div>
                   <h2 class="advantage_name">套餐自由升级</h2>
                   <p class="advantage_en">PACKAGE UPGRADE</p>
                   <div class="advantage_dec">
                       用户按需求选择相应的套餐模式<br>
                       利用控制面板进行相应操作即可
                   </div>
               </li>
               <li class="advantage_item">
                   <div class="advantage_icon">
                       <i class="iconfont icon-beifen"></i>
                   </div>
                   <h2 class="advantage_name">完整无忧备份</h2>
                   <p class="advantage_en">WORRY-FREE BACKUP</p>
                   <div class="advantage_dec">
                       全时智能备份多个还原点 <br>
                       附赠等G级备份空间
                   </div>
               </li>
               <li class="advantage_item">
                   <div class="advantage_icon">
                       <i class="iconfont icon-daishoufei"></i>
                   </div>
                   <h2 class="advantage_name">超强大性价比</h2>
                   <p class="advantage_en">COST-EFFECTIVE</p>
                   <div class="advantage_dec">
                       价格在国内一线服务商中极具竞争力<br>
                       灵活方便的付款方式
                   </div>
               </li>
               <li class="advantage_item">
                   <div class="advantage_icon">
                       <i class="iconfont icon-fangwen"></i>
                   </div>
                   <h2 class="advantage_name">先访问后备案</h2>
                   <p class="advantage_en">FIRST VISIT</p>
                   <div class="advantage_dec">
                       备案期间免费提供转发服务 <br>
                       使网站可以访问
                   </div>
               </li>
               <li class="advantage_item">
                   <div class="advantage_icon">
                       <i class="iconfont icon-fuwu"></i>
                   </div>
                   <h2 class="advantage_name">完美服务</h2>
                   <p class="advantage_en">PERFECT SERVICE</p>
                   <div class="advantage_dec">
                       首创3×3为核心的服务模式 <br>
                       7x24小时技术支持
                   </div>
               </li>
           </ul>
       </div>
    </div>
    <!--footer-->
    <div class="footer">
        <div class="container">
            <div class="footer_top clearfix">
                <dl class="footer_code left">
                    <dt>
                        <img src="images/code.png" alt="">
                    </dt>
                    <dd>
                        <a href="#"><i class="iconfont icon-xiaoxi"></i>在线咨询</a>
                    </dd>
                </dl>
                <dl class="other_line left">
                    <dt>商户中心</dt>
                    <dd>
                        <a href="#">购买申请</a>
                    </dd>
                    <dd>
                        <a href="#">产品验证</a>
                    </dd>
                    <dd>
                        <a href="#">合作流程</a>
                    </dd>
                </dl>
                <dl class="other_line left">
                    <dt>服务内容</dt>
                    <dd>
                        <a href="#">游戏代理</a>
                    </dd>
                    <dd>
                        <a href="#">游戏盒子</a>
                    </dd>
                    <dd>
                        <a href="#">H5平台系统</a>
                    </dd>
                </dl>
                <dl class="other_line left">
                    <dt>关于215</dt>
                    <dd>
                        <a href="#">企业介绍</a>
                    </dd>
                    <dd>
                        <a href="#">公司证件</a>
                    </dd>
                    <dd>
                        <a href="#">招聘信息</a>
                    </dd>
                </dl>
                <dl class="left footer_contact other_line">
                    <dt>联系方式</dt>
                    <dd>
                        <span class="contact_icon"><i class="iconfont icon-dingwei"></i></span>
                        XXX
                    </dd>
                    <dd>
                        <span class="contact_icon"><i class="iconfont icon-dianhua1"></i></span>
                        XXX
                    </dd>
                    <dd>
                        <span class="contact_icon"><i class="iconfont icon-youxiang"></i></span>
                        XXX
                    </dd>
                </dl>
            </div>
            <div class="footer_line">
                    <span>友情链接：</span>
                    <a href="#">百度一下</a> |<a href="#">优酷视频</a> |<a href="#">腾讯视频</a>
            </div>
            <div class="footer_ban">
                <div class="left footer_ban_l">
                    <a href="#">版权所有 © XXX   沪ICP备XXX号-19  </a>
                </div>
                <div class="right footer_ban_r">
                    <img src="images/footer_logo.png" alt=""> |
                    <img src="images/footer_jw.png" alt="">
                </div>
            </div>
        </div>
    </div>
    <!--浮层-->
    <div class="float_box">
        <div class="float_up">
            <p>TOP</p>
            <span><i class="iconfont icon-jiantou-up"></i></span>
        </div>
        <ul class="float_list">
            <li>
                <span><i class="iconfont icon-qq"></i></span>
                <div class="show_box">
                    <a href="javascript:;">立即咨询</a>
                </div>
            </li>
            <li>
                <span><i class="iconfont icon-dianhua"></i></span>
                <div class="show_box">
                    <p>XXX</p>
                </div>
            </li>
            <li>
                <span><i class="iconfont icon-weixin1"></i></span>
                <div class="show_box">
                    <img src="images/code2.png" alt="" class="code">
                    <p>扫一扫，关注哦~</p>
                </div>
            </li>
        </ul>
        <div class="float_down">
            <span><i class="iconfont icon-jiantou-down"></i></span>
        </div>
    </div>
</body>
</html>
<script src="js/jquery.js"></script>
<script src="lib/swiper/js/swiper.min.js"></script>
<script src="js/common.js"></script>
<script>

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 0,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
    });


    function _resize(){
        var w = $(window).width();

        if(w<=700){
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                slidesPerView: 1,
                paginationClickable: true,
                spaceBetween: 0,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
            });
        }else if(w<=991&&w>=768){
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                slidesPerView: 3,
                paginationClickable: true,
                spaceBetween: 0,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
            });
        }else if(w>=992&&w<=1199){
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                slidesPerView: 3,
                paginationClickable: true,
                spaceBetween: 0,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
            });
        }else{
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                slidesPerView: 4,
                paginationClickable: true,
                spaceBetween: 0,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
            });


        }
    }
    _resize();

    $(window).resize(function(){
        _resize();
    });
    _indexFn._hover('.advantage_list');

</script>